import {
  colorOptions,
  columns,
  drawerFormState,
  tableActiveKey,
} from "./store";
import defaultAvatarUrl from "@/assets/img/default-avatar.png";
import styles from "./index.module.less";
import { popularCertStatusMap } from "./dict";
import { fetchList, handleAction } from ".";
import { getSelfNodeIcon } from "@system/menu/store";
import IMToolTip from "@/components/common/ToolTip";
export const tablePage = renderTablePage();
export const tableData = ref<any>([]);
export const tableLoading = ref(false);
const defineBodyCellMap = (number, { value, text, index, column, record }) => {
  const renderPopularLevel = () => (
    <div>
      {record.popularLevel && +record.popularLevel != 0 ? (
        <i>
          {$t("placeholder103") + record.popularLevel + $t("base.percentage")}
        </i>
      ) : null}
    </div>
  );
  const renderStatus = () =>
    number === 0 ? (
      <div>
        <i class={colorOptions[record.status]}>
          {selectDictLabel(popularCertStatusMap, record.status)}
        </i>
      </div>
    ) : (
      <div>
        {record.status === 4
          ? $t("dict0")
          : record.status === 6 || record.status === 2
          ? $t("dict2")
          : $t("dict1")}
      </div>
    );
  const renderPortrait = () => {
    const urlList = reactive(
      [record.portrait1]
        .concat(record.portrait2 ? record.portrait2 : [])
        .concat(record.portrait3 ? record.portrait3 : [])
    );
    const firstUrlArray = [urlList[0]];
    const resetUrlArray = [...urlList.slice(1)];
    return (
      <div>
        <div class={styles.Flex_cell}>
          {firstUrlArray.map((url, index) => (
            <img
              src={url ? url : defaultAvatarUrl}
              class={styles.photo}
              onClick={$preview.bind(
                this,
                url ? url : defaultAvatarUrl,
                urlList,
                index
              )}
            />
          ))}
          {resetUrlArray.length ? (
            <im-tooltip
              defaultValue={
                <>
                  <i class={[styles.Dashed, "fs10"]}>{resetUrlArray.length}</i>
                </>
              }
            />
          ) : null}
        </div>
      </div>
    );
  };
  const renderVerifyVideo = () => (
    <div>
      <video-player style="width: 40px;height: 40px;" v-model={value} />
    </div>
  );
  const renderAction = () => {
    const showAgreeBtn = [4];
    const showRefuseBtn = [4];
    return number === 0 ? (
      <div>
        {withDirectivePower({
          vNode: (
            <div class="s-table-body_cell">
              <s-button
                type="link"
                onClick={() => {
                  drawerFormState.status = record.status;
                  handleAction({ record, type: "view" });
                }}
                icon={renderIcon(getSelfNodeIcon("popularApi.selectDataById"))}
              >
                {$t("base.detail")}
              </s-button>
              <a-divider type="vertical" />
            </div>
          ),
          bindingValue: "popularApi.selectDataById",
        })}

        {record.status === 0
          ? withDirectivePower({
              vNode: (
                <s-button
                  type="link"
                  onClick={() =>
                    handleAction({
                      record,
                      type: "updateLevel",
                    })
                  }
                >
                  {$t("base.specifyPopularityLevel")}
                </s-button>
              ),
              bindingValue: "popularApi.update",
            })
          : null}
      </div>
    ) : (
      <div>
        {withDirectivePower({
          vNode: (
            <div class="s-table-body_cell">
              <s-button
                type="link"
                onClick={() => {
                  drawerFormState.status = record.status;
                  handleAction({ record, type: "view" });
                }}
                icon={renderIcon(getSelfNodeIcon("popularApi.queryAuditById"))}
              >
                {$t("base.detail")}
              </s-button>
              <a-divider type="vertical" />
            </div>
          ),
          bindingValue: "popularApi.queryAuditById",
        })}

        {showAgreeBtn.includes(record.status)
          ? withDirectivePower({
              vNode: renderAgree.call({
                record,
                handleAction,
                identify: "popularApi.agreeAudit",
              }),
              bindingValue: "popularApi.agreeAudit",
            })
          : null}
        <a-divider type="vertical" />
        {showRefuseBtn.includes(record.status)
          ? withDirectivePower({
              vNode: renderRefuse.call({
                record,
                handleAction,
                identify: "popularApi.refuseAudit",
              }),
              bindingValue: "popularApi.refuseAudit",
            })
          : null}
      </div>
    );
  };
  return new Map([
    [{ key: "index", state: /[01]/ }, renderIndex],
    [
      { key: "userInfo", state: /[01]/ },
      renderUserInfo.bind({ record: value, tableLoading }),
    ],
    [{ key: "popularLevel", state: /[0]/ }, renderPopularLevel],
    [{ key: "status", state: /[01]/ }, renderStatus],
    [{ key: "portrait1", state: /[1]/ }, renderPortrait],
    [{ key: "verify_video", state: /[1]/ }, renderVerifyVideo],
    [{ key: "action", state: /[01]/ }, renderAction],
  ]);
};
const handleRenderBodyCellTask = (number, props) => {
  const array = [...defineBodyCellMap(number, props)].filter(
    ([object]) => object.key === props.column.key && object.state.test(number)
  );
  const _this = { number, tablePage, ...props };
  return array.map(([, value]) => value.call(_this));
};
export const tableConfig = () => {
  const defineTable = {
    pagination: tablePage,
    loading: tableLoading,
    columns,
    dataSource: tableData,
    on: {
      change(paging: { current: number; pageSize: number }) {
        tablePage.current = paging.current;
        tablePage.pageSize = paging.pageSize;
        fetchList();
      },
    },
    tableSlot: {
      bodyCell: (props) =>
        handleRenderBodyCellTask(tableActiveKey.value, props),
    },
  };
  return defineTable;
};
